<template>
	<n-table
		:bordered="false"
		:single-line="false"
		size="small"
		style="border-bottom-right-radius: 7px; border-bottom-left-radius: 7px"
	>
		<thead>
			<tr>
				<th>key</th>
				<th>value</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(item, index) in tableArray.content" :key="index">
				<td>
					{{ item.key || '暂无' }}
				</td>
				<td>
					{{ item.value || '暂无' }}
				</td>
			</tr>
		</tbody>
	</n-table>
</template>

<script setup>
const props = defineProps({
	target: Object
});

// 默认表格
const defaultItem = {
	key: '',
	value: ''
};
const tableArray = reactive({ content: [] });

// 监听选项
watch(
	() => props.target,
	(target) => {
		tableArray.content = [];
		for (const k in target) {
			tableArray.content.push({
				key: k,
				value: target[k]
			});
		}
		// 默认值
		if (!tableArray.content.length) tableArray.content = [JSON.parse(JSON.stringify(defaultItem))];
	},
	{ immediate: true, deep: true }
);
</script>
